import React, { Component } from "react";

/* 
      初步挂载
     1. 组件更新 App getDerivedStateFromProps
     3. 组件更新 render
      挂载结束
      
      setState更新
     1. 组件更新 App getDerivedStateFromProps
     2. 组件更新 shouldComponentUpdate
     3. 组件更新 render
     4. 组件更新 执行 getSnapshotBeforeUpdate
     5. 组件更新 执行 componentDidUpdate
      setState更新结束
 */

class App extends Component {
  
  static getDerivedStateFromProps(props,state){ //得到派生的属性
    console.log("1. 组件更新 App getDerviedStateFromProps")
    return null;  //
  }

  shouldComponentUpdate(nextProps,nextState){
    //false => 组件不会更新
    //true => 组件更新
    console.log("2. 组件更新 shouldComponentUpdate")
    return true;
  }

  state = {
    msg:"牛"
  }

  handleClick=()=>{
    this.setState({
      msg:"猪"
    })
  }

  render() {
    console.log("3. 组件更新render")
    return (
      <div>
          <h1>{this.state.msg}</h1>
          <button onClick={this.handleClick}>变猪</button>
      </div>
    );
  }

  getSnapshotBeforeUpdate(preProps,preState){
    console.log("4.组件更新 执行 getSnapshotBeforeUpdate")
    return null;
  }

  componentDidUpdate(preProps,preState,snapshot){
    console.log("5. 组件更新 执行 componentDidUpdate")
  }
}

export default App;

